import React, { Component } from "react";

class App extends Component {
  state = {
    value1: "",
    value2: "",
    value3: "",
  };
  handleChange1 = (e) => {
    this.setState({
      value1: e.target.value,
    });
  };
  handleChange2 = (e) => {
    this.setState({
      value2: e.target.value,
    });
  };
  handleChange3 = (e) => {
    this.setState({
      value3: e.target.value,
    });
  };
  handleClick = () => {
    console.log("value1:" + this.state.value1);
    console.log("value2:" + this.state.value2);
    console.log("value3:" + this.state.value3);
  };
  render() {
    // input和textarea和select使用受控组件的方式都是一样的，都是使用value属性和onChange事件
    return (
      <>
        <h2>form组件</h2>
        <input
          type="text"
          value={this.state.value1}
          onChange={this.handleChange1}
        />

        <br />

        <textarea
          value={this.state.value2}
          onChange={this.handleChange2}
        ></textarea>

        <br />

        <select value={this.state.value3} onChange={this.handleChange3}>
          <option value="grapefruit">葡萄柚</option>
          <option value="lime">酸橙</option>
          <option value="coconut">椰子</option>
          <option value="mango">芒果</option>
        </select>

        <hr />
        <button onClick={this.handleClick}>btn</button>
      </>
    );
  }
}

export default App;
